<template>
  <view>
    <button v-if="blue" class="blue" v-bind="$attrs">
      <slot></slot>
    </button>
    <button v-else class="block-btn" :class="[{'block':block},{'mini':mini}]" v-bind="$attrs">
      <slot></slot>
    </button>
  </view>
</template>
<script setup>
  inheritAttrs: false;
  const props = defineProps({
    blue: {
      type: Boolean,
      default: false,
    },
    block: {
      type: Boolean,
      default: false,
    }, mini: {
      type: Boolean,
      default: false,
    },
  });
</script>
<style scoped lang="scss">
  .block-btn {
    height: 80rpx;
    font-size: 30rpx;
    font-weight: 500;
    padding: 0rpx 57rpx;
    color: $white;
    background: linear-gradient(90deg, #45C9F0, #36F6AF);
    border-radius: 50rpx;

    &.block {
      width: 100%;
      display: block;
    }

    &.mini {
      padding: 0rpx 28rpx;
      height: 54rpx;
      line-height: 54rpx;
    }
  }

  .blue {
    display: inline-block;
    font-size: 30rpx;
    color: #FFFFFF;
    padding: 0rpx 57rpx;
    background: #007AFF;
    text-align: center;
    border-radius: 60rpx;
  }
</style>
